<template>
  <div class="app-container">
    <el-row id="print" style="width:100%">
      <h2 align="center">{{ $t("rework.cpkReport") }}</h2>
      <el-col :span="12">
        <stdev-chart :chart-data="stdevChartData" />
        <el-table :data="headerList" :show-header="false" border fit :row-style="{ height: '20px' }" :cell-style="{ padding: '2px' }">
          <el-table-column label="A" width="auto" align="center">
            <template slot-scope="{row}">
              <span style="color:blue">{{ row.title1 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="A" width="auto" align="center">
            <template slot-scope="{row}">
              <span>{{ row.value1 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="A" width="auto" align="center">
            <template slot-scope="{row}">
              <span style="color:blue">{{ row.title2 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="A" width="auto" align="center">
            <template slot-scope="{row, $index}">
              <span :style="{color: $index === 8? (row.value2 >1.33? 'green': 'red'):'gray' }">{{ row.value2 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="A" width="auto" align="center">
            <template slot-scope="{row}">
              <span style="color:blue">{{ row.title3 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="A" width="auto" align="center">
            <template slot-scope="{row}">
              <span>{{ row.value3 }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="12">
        <basic-line-chart :chart-data="basicChartData" />
        <el-table
          v-loading="listLoading"
          :data="list"
          :header-row-style="{ color: 'black' }"
          :header-cell-style="{ background: 'lightgray', padding: '2px' }"
          :row-style="{ height: '20px' }"
          :cell-style="{ padding: '2px' }"
          border
          fit
          highlight-current-row
        >
          <el-table-column width="50px" align="center">
            <template slot-scope="scope">
              <span style="color:blue">{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="A" width="auto" align="center">
            <template slot-scope="{row}">
              <span>{{ row.value1 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="B" width="auto" align="center">
            <template slot-scope="{row}">
              <span>{{ row.value2 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="C" width="auto" align="center">
            <template slot-scope="{row}">
              <span>{{ row.value3 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="D" width="auto" align="center">
            <template slot-scope="{row}">
              <span>{{ row.value4 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="E" width="auto" align="center">
            <template slot-scope="{row}">
              <span>{{ row.value5 }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-button v-print="'#print'" style="margin-top:20px" type="primary">
        {{ $t('rework.print') }}
      </el-button>
    </el-row>
  </div>
</template>

<script>
import i18n from '@/lang'
import BasicLineChart from '@/components/Charts/BasicLineChart.vue'
import StdevChart from '@/components/Charts/StdevChart.vue'

export default {
  components: {
    BasicLineChart,
    StdevChart
  },
  props: {
    cpkData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      listLoading: false,
      list: [
        { value1: 1, value2: 2, value3: 3, value4: 4, value5: 5 },
        { value1: 1, value2: 2, value3: 3, value4: 4, value5: 5 },
        { value1: 1, value2: 2, value3: 3, value4: 4, value5: 5 },
        { value1: 1, value2: 2, value3: 3, value4: 4, value5: 5 },
        { value1: 1, value2: 2, value3: 3, value4: 4, value5: 5 }],
      headerList: [
        { title1: i18n.t('rework.sampleNum'), value1: '50', title2: '子组大小', value2: '5', title3: '', value3: '' },
        { title1: '平均值', value1: '50', title2: '最大值', value2: '5', title3: '最小值', value3: '1' },
        { title1: '上限值', value1: '50', title2: '目标值', value2: '5', title3: '下限值', value3: '' },
        { title1: '+3Sigma', value1: '50', title2: '-3Sigma', value2: '5', title3: '', value3: '' },
        { title1: '', value1: '', title2: '', value2: '', title3: '', value3: '' },
        { title1: '', value1: '', title2: '结果', value2: '', title3: '', value3: '' },
        { title1: 'STDEV', value1: '', title2: '', value2: '5', title3: '', value3: '' },
        { title1: 'CPK', value1: '', title2: '', value2: '5', title3: '', value3: '' },
        { title1: 'CP', value1: 'Cp>1.33', title2: '', value2: '5', title3: '', value3: '' }],
      basicChartData: {
        valueX: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
        valueY1: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
        valueY2: [1, 2, 11, 4, 5, 2, 7, 8, 1, 10],
        valueY3: [10, 10, 10, 10, 10, 10, 10, 10, 10, 10],
        title: ''
      },
      stdevChartData: {
        values: [],
        stdev: 0,
        avg: 0
      }
    }
  },
  watch: {
    cpkData: {
      deep: true,
      handler(val) {
        this.getList(val)
        this.getHeaderList(val)
        this.getChartData(val)
        this.getStdevChartData(val)
      }
    }
  },
  mounted() {
    this.getList(this.cpkData)
    this.getHeaderList(this.cpkData)
    this.getChartData(this.cpkData)
    this.getStdevChartData(this.cpkData)
  },
  created() {
  },
  destroyed() {
  },
  methods: {
    getList({ values }) {
      var col = 0
      var row = 0
      this.list = []
      for (var i = 1; i * 5 <= values.length; i++) {
        this.list.push({ value1: 1, value2: 2, value3: 3, value4: 4, value5: 5 })
      }
      values.forEach(v => {
        if (row >= this.list.length) return
        switch (col) {
          case 0:
            this.list[row].value1 = v
            break
          case 1:
            this.list[row].value2 = v
            break
          case 2:
            this.list[row].value3 = v
            break
          case 3:
            this.list[row].value4 = v
            break
          case 4:
            this.list[row].value5 = v
            row++
            break
        }
        col++
        if (col > 4) col = 0
      })
    },
    getChartData({ values, range }) {
      var chartData = { valueX: [], valueY1: [], valueY2: [], valueY3: [], title: '' }
      for (var i = 0; i < values.length; i++) {
        chartData.valueX.push(i)
        chartData.valueY2.push(values[i])
        chartData.valueY1.push(range.minValue)
        chartData.valueY3.push(range.maxValue)
        chartData.title = ''
      }
      this.basicChartData = chartData
    },
    getHeaderList({ values, range, data }) {
      this.headerList[0].value1 = values.length
      var sum = 0
      values.forEach(v => {
        sum += v
      })
      var avg = parseFloat(sum / values.length)
      this.headerList[1].value1 = avg.toFixed(2)
      this.headerList[1].value2 = Math.max.apply(null, values)
      this.headerList[1].value3 = Math.min.apply(null, values)
      this.headerList[2].value1 = range.maxValue
      this.headerList[2].value2 = range.standardValue
      this.headerList[2].value3 = range.minValue
      this.headerList[3].value1 = (avg - 3 * data.stdev).toFixed(2)
      this.headerList[3].value2 = (avg + 3 * data.stdev).toFixed(2)
      this.headerList[6].value2 = data.stdev
      this.headerList[7].value2 = data.cpk
      this.headerList[8].value2 = data.cp
    },
    getStdevChartData({ values, range, data }) {
      var chartData = { values, stdev: data.stdev,
        avg: this.headerList[1].value1,
        min: this.headerList[1].value3,
        max: this.headerList[1].value2 }
      this.stdevChartData = chartData
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 5px;
  width:100%;
  // background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px x0;
    //margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
